<template>
    <div class="register-page">
        <div class="register-container">
            <!-- 左侧装饰区域 -->
            <div class="decoration-area">
                <div class="company-info">
                    <h1>党员发展管理系统</h1>
                    <p>欢迎注册党员发展管理系统</p>
                </div>
                <div class="svg-container">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" class="register-svg">
                        <path
                            d="M488.6 250c0 131.4-106.6 238-238 238S12.5 381.4 12.5 250 119.1 12 250.5 12s238 106.6 238 238z"
                            fill="#fff" opacity=".2" />
                        <path
                            d="M250 0C111.9 0 0 111.9 0 250s111.9 250 250 250 250-111.9 250-250S388.1 0 250 0zm0 450c-110.5 0-200-89.5-200-200S139.5 50 250 50s200 89.5 200 200-89.5 200-200 200z"
                            fill="#409EFF" opacity=".2" />
                        <circle cx="250" cy="250" r="150" fill="#409EFF" opacity=".1" />
                        <path
                            d="M390 250c0 77.3-62.7 140-140 140s-140-62.7-140-140 62.7-140 140-140 140 62.7 140 140zM215 350l120-120M215 150l120 120"
                            stroke="#409EFF" stroke-width="8" fill="none" />
                    </svg>
                </div>
            </div>

            <!-- 右侧注册区域 -->
            <div class="form-area">
                <el-card class="register-card" shadow="never">
                    <div class="card-header">
                        <h2>用户注册</h2>
                    </div>

                    <el-form :model="registerForm" @submit.prevent="handleRegister" label-position="top" :rules="rules"
                        ref="registerFormRef" class="register-form">
                        <el-form-item label="账号" prop="username">
                            <el-input v-model="registerForm.username" placeholder="请输入账号" size="large">
                                <template #prefix>
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="电子邮箱" prop="email">
                            <el-input v-model="registerForm.email" placeholder="请输入电子邮箱" size="large">
                                <template #prefix>
                                    <el-icon>
                                        <Message />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="registerForm.password" show-password placeholder="请输入密码"
                                size="large">
                                <template #prefix>
                                    <el-icon>
                                        <Lock />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="确认密码" prop="confirmPassword">
                            <el-input type="password" v-model="registerForm.confirmPassword" show-password
                                placeholder="请再次输入密码" size="large">
                                <template #prefix>
                                    <el-icon>
                                        <Lock />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" native-type="submit" class="register-button" :loading="loading"
                                size="large" @click="handleRegister">
                                注册
                            </el-button>
                        </el-form-item>
                    </el-form>

                    <div class="footer-links">
                        <p>已有账号? <router-link to="/">立即登录</router-link></p>
                    </div>
                </el-card>

                <!-- 右下角SVG装饰 -->
                <div class="corner-decoration">
                    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 100 100">
                        <circle cx="90" cy="90" r="40" fill="#409EFF" opacity="0.1" />
                        <circle cx="90" cy="90" r="30" fill="#409EFF" opacity="0.1" />
                        <circle cx="90" cy="90" r="20" fill="#409EFF" opacity="0.1" />
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { User, Lock, Message } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { register } from '@/api/auth';

const router = useRouter();
const registerFormRef = ref(null);
const loading = ref(false);

const registerForm = ref({
    username: '',
    email: '',
    password: '',
    confirmPassword: ''
});

const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'));
    } else {
        if (registerForm.value.confirmPassword !== '') {
            registerFormRef.value.validateField('confirmPassword');
        }
        callback();
    }
};

const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码'));
    } else if (value !== registerForm.value.password) {
        callback(new Error('两次输入密码不一致!'));
    } else {
        callback();
    }
};

const rules = {
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入电子邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的电子邮箱格式', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
        { validator: validatePass, trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: validatePass2, trigger: 'blur' }
    ]
};

const handleRegister = async () => {
    if (!registerFormRef.value) return;

    await registerFormRef.value.validate(async (valid) => {
        if (valid) {
            loading.value = true;
            try {
                // 调用注册API
                const response = await register({
                    account: registerForm.value.username,
                    email: registerForm.value.email,
                    pwd: registerForm.value.password
                });

                // 使用新的响应格式 {code, msg, data}
                if (response.data.code === 200) {
                    ElMessage.success(response.data.msg || '注册成功，请登录');
                    // 注册成功后跳转到登录页
                    router.push('/');
                } else {
                    ElMessage.error(response.data.msg || '注册失败');
                }
            } catch (error) {
                console.error('注册错误:', error);
                ElMessage.error(error.response?.data?.msg || '注册失败，请稍后再试');
            } finally {
                loading.value = false;
            }
        }
    });
};
</script>

<style scoped>
.register-page {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f7fa;
    position: relative;
    margin: 0;
    padding: 30px 0;
    overflow-y: auto;
}

.register-container {
    display: flex;
    width: 80%;
    min-height: 600px;
    /* 固定最小高度 */
    height: auto;
    /* 改为自动高度，让内容决定高度 */
    max-width: 1200px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* 修改为hidden防止内容溢出 */
}

/* 左侧装饰区域 */
.decoration-area {
    flex: 1;
    background: linear-gradient(135deg, #409EFF 0%, #64b5f6 100%);
    color: white;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 改为从顶部开始 */
    position: relative;
    height: auto;
    /* 自动高度 */
}

.company-info {
    z-index: 2;
}

.company-info h1 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 20px;
}

.company-info p {
    font-size: 18px;
    opacity: 0.9;
    max-width: 300px;
    line-height: 1.6;
}

.svg-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
    pointer-events: none;
    /* 防止SVG阻止鼠标事件 */
    overflow: hidden;
    /* 防止SVG溢出 */
}

.register-svg {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 100%;
}

/* 右侧表单区域 */
.form-area {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    height: auto;
    /* 自动高度 */
}

.register-card {
    border: none;
    box-shadow: none;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-header {
    text-align: center;
    margin-bottom: 30px;
    /* 统一与登录页面的margin */
}

.card-header h2 {
    font-size: 28px;
    font-weight: 500;
    color: #303133;
}

.register-form {
    padding: 0 20px;
    flex-grow: 1;
}

.register-button {
    width: 100%;
    height: 50px;
    margin-top: 10px;
    font-size: 16px;
}

.footer-links {
    text-align: center;
    margin-top: 20px;
    color: #606266;
}

.footer-links a {
    color: #409EFF;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

.corner-decoration {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
    opacity: 0.7;
    pointer-events: none;
    /* 防止SVG阻止鼠标事件 */
}

:deep(.el-form-item__label) {
    font-weight: 500;
}

:deep(.el-input__wrapper) {
    background-color: #f5f7fa;
    border-radius: 4px;
}

:deep(.el-button--primary) {
    background-color: #409EFF;
}

/* 响应式调整 */
@media screen and (max-width: 1024px) {
    .register-container {
        width: 90%;
        flex-direction: column;
        height: auto;
    }

    .decoration-area {
        padding: 30px;
        min-height: 200px;
        max-height: 250px;
        /* 在移动视图限制高度 */
    }

    .company-info h1 {
        font-size: 28px;
    }

    .company-info p {
        font-size: 16px;
    }
}
</style>